<!-- 质保录入 -->
<template>
	<view class="content">
		<u-search :show-action="true" v-model="code" @change="change" placeholder="请输入质保编号"
			:showAction="false"></u-search>
		<view class="card" v-for="(item,index) in list" :key="index" @click="clickItem(item)">
			<view class="C_t">
				{{getCode(item.quTypeId)}}
			</view>
			<view class="c_n">
				质保编号：<text>{{item.quQualityNum}}</text>
			</view>
			<view class="c_n">
				车主姓名：<text>{{item.quName}}</text>
			</view>
			<view class="c_n">
				车牌号：<text>{{item.quVin}}</text>
			</view>
		</view>
		<view class="zblr" @click="infoLr">
			<u-button :hoverClass="'2222'" type="primary" @click="infoLr">添加电子质保</u-button>
		</view>
		<image :src="src" mode="scaleToFill" class="images"></image>
	</view>
</template>

<script>
	import {
		url
	} from '@/common/index.js'
	import {
		getZb,
		getBg
	} from '@/common/api'
	export default {
		data() {
			return {
				info: {},
				list: [],
				oldlist: [],
				code: "",
				src:""
			}
		},
		methods: {
			infoLr() {
				uni.navigateTo({
					url: "/pagesIndex/index/enterFrom"
				})
			},
			async getZb() {
				let data = await getZb({
					quPhone: this.info.leNumber,
					quTypeId: ""
				})
				this.list = data.rows
				this.oldlist = data.rows
			},
			getCode(code) {
				return code == "100" ? "漆面膜" : code == "101" ? "改色膜" : "太阳膜"
			},
			change(code) {
				let list = JSON.parse(JSON.stringify(this.list))
				if (code != "") {
					let newData = []
					list.forEach(item => {
						if (item.quQualityNum && item.quQualityNum.indexOf(code) > -1) {
							newData.push(item)
						}
					})
					this.list = newData
				} else {
					this.list = this.oldlist
				}
			},
			async getBg() {
				let data = await getBg(129)
				this.src = url + data.rows[0].baUrl
			},
			clickItem(item){
				uni.navigateTo({
					url:"/pagesIndex/enterInfo/enterInfo?item=" + JSON.stringify(item)
				})
			}
		},
		onLoad(data) {
			this.info = uni.getStorageSync("enterInfo")
			this.getZb()
			this.getBg()
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 30rpx;

	}

	.zblr {
		width: calc(100% - 60rpx);
		position: absolute;
		bottom: 10rpx;
	}

	.card {
		width: 690rpx;
		border-radius: 15rpx;
		margin: 30rpx 0;
		padding: 15rpx;
		border: 1rpx solid #f4f4f4;
		animation: moveRight 2s;
		/* 动画名称，持续时间，迭代次数 */
	}

	/* 定义动画 */
	@keyframes moveRight {
		from {
			transform: translateY(-200rpx);
		}

		to {
			transform: translateY(0);
			/* 从当前位置平移100像素 */
		}
	}

	.C_t {
		font-size: 30rpx;
		color: #fff;
		font-weight: 500;
		margin: 20rpx 0;
	}

	.c_n {
		margin: 20rpx 0;
		color: #fff;
	}

	.c_n text {
		color: #959595;
	}

	/deep/.u-btn--primary {
		background-color: #222;
		color: #fff;
		opacity: 0.8;
		border: 1rpx solid #f4f4f4;
	}

	.images {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: -1;
		height: 100vh;
	}
</style>